<template>
  <el-breadcrumb class="app-breadcrumb" separator-class="el-icon-arrow-right">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
        <span
          v-if="
            item.redirect === 'noredirect' || index === breadcrumbs.length - 1
          "
          class="no-redirect"
          >{{ item.meta.title }}</span
        >
        <span v-else @click.prevent="handleLink(item)">{{
          item.meta.title
        }}</span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script lang="ts">
import pathToRegexp from 'path-to-regexp'
import { Component, Vue, Watch } from 'vue-property-decorator'
import { RouteRecord, Route } from 'vue-router'
import { PermissionModule } from '@/store/modules/permission'

@Component({
  name: 'Breadcrumb'
})
export default class extends Vue {
  @Watch('$route')
  private onRouteChange(route: Route) {
    // if you go to the redirect page, do not update the breadcrumbs
    if (route.path.startsWith('/redirect/')) {
      return
    }
    console.log(route, PermissionModule.isBreadcrumbListenerByMicro)
    // 如果是非子应用发起的生成面包屑规则
    if (!PermissionModule.isBreadcrumbListenerByMicro) {
      if (route && route.meta && route.meta.activeMenu) {
        PermissionModule.GenerateSidebarMenu({
          path: route.meta.activeMenu,
          meta: route.meta
        })
      } else {
        PermissionModule.GenerateSidebarMenu({ path: route.path })
      }
    }
  }
  get breadcrumbs() {
    //computed 属性
    return PermissionModule.breadcrumb.filter((it: any) => it.meta.title !== '')
  }

  private getSystemName(systemId: string) {
    var currentSystemRoutes = PermissionModule.systemRoutes.filter(item => {
      return item.meta.id === systemId
    })[0]
    return [
      {
        path: '/dashboard',
        meta: { title: currentSystemRoutes.meta.title }
      } as RouteRecord
    ]
  }
  private isDashboard(route: RouteRecord) {
    const name = route && route.name
    if (!name) {
      return false
    }
    return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
  }

  private pathCompile(path: string) {
    // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
    const { params } = this.$route
    const toPath = pathToRegexp.compile(path)
    return toPath(params)
  }

  private handleLink(item: any) {
    /* const { redirect, path } = item
    if (redirect) {
      this.$router.push(redirect)
      return
    }
    this.$router.push(this.pathCompile(path)) */
  }
  mounted() {
    if (this.$route && this.$route.meta && this.$route.meta.activeMenu) {
      PermissionModule.GenerateSidebarMenu({
        path: this.$route.meta.activeMenu,
        meta: this.$route.meta
      })
    } else {
      PermissionModule.GenerateSidebarMenu({ path: location.pathname })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;

  .no-redirect {
    color: $wordGray;
    cursor: text;
  }
}
</style>
